import React, { useImperativeHandle } from 'react';
import PropTypes from 'prop-types';
import { useRequest } from '@/hooks';
import { Skeleton } from 'antd';
import useControllableValue from '@/hooks/useControllableValue';
import GroupingOfCourse from './GroupingOfCourse';
import GroupingOfTask from './GroupingOfTask';
import GroupingOfAttendance from './GroupingOfAttendance';
import { getGroupingOfCourseData, getGroupingOfTaskData, getGroupingOfAttendanceData } from '../../services';
import styles from './index.less';

/**
 * 主管概况分组
 *
 * 使用示例
 // 还未进入审批中的时候, 组件数据自己获取
 // 情况一: 使用表单
 const EmployeeSupervisor = props => {
     const { employeeCode } = location.query;
     const { getFieldDecorator } = props.form;
     return (
         <Form>
             <Form.Item>
                 {getFieldDecorator('supervisorProfileData')(
                     <SupervisorProfile employeeCode={employeeCode} /> // value 即需要固化的数据
                 )}
             </Form.Item>
         </Form>
     );
 };
 export default Form.create()(withRouter(EmployeeSupervisor));
 // 情况二: 不使用表单
 固化数据也可以通过 <SupervisorProfile ref={supervisorProfileRef} />   supervisorProfileRef.current.data 来取得

 // 审批阶段中, 数据要依靠外部注入
 // 使用表单的情况可以使用: {getFieldDecorator('supervisorProfileData', initialValue: [...])
 // 不使用表单的情况可以用: <SupervisorProfile value={historyData} />

 提交流程时需要判断数据是否完整
 const supervisorProfileRef = useRef()
 <SupervisorProfile ref={supervisorProfileRef} employeeCode={employeeCode} />

 // supervisorProfileRef?.current.isCompleteData === true 表示数据全部正确请求
*/
const SupervisorProfile = React.forwardRef((props, ref) => {
    const { label, employeeCode } = props;
    const [value, onChange] = useControllableValue(props);

    const { loading: groupingOfCourseLoading } = useRequest(() => getGroupingOfCourseData(employeeCode), {
        ready: !value && !!employeeCode,
        refreshDeps: [employeeCode],
        onSuccess: res => {
            onChange({ ...value, ...res });
        }
    });
    const { loading: groupingOfTaskLoading } = useRequest(() => getGroupingOfTaskData(employeeCode), {
        ready: !value && !!employeeCode,
        refreshDeps: [employeeCode],
        onSuccess: res => {
            onChange({ ...value, ...res });
        }
    });
    const { loading: groupingOfAttendanceLoading } = useRequest(() => getGroupingOfAttendanceData(employeeCode), {
        ready: !value && !!employeeCode,
        refreshDeps: [employeeCode],
        onSuccess: res => {
            onChange({ ...value, ...res });
        }
    });

    // 外部可以通过 ref 来取得历史数据
    useImperativeHandle(
        ref,
        () => ({
            value,
            isCompleteData: val => !!(val && val.leaderHistoryData && val.courseData && val.attendanceData)
        }),
        [value]
    );

    return (
        <div className={styles.supervisorProfileWrapper}>
            {label && (
                <div className={styles.fieldsetTitle}>{label}</div>
            )}
            {!label && label !== false && (
                <div className={styles.fieldsetTitle}>主管概况</div>
            )}
            <div className={styles.supervisorProfileMain}>
                <Skeleton loading={!value}>
                    {value && (
                        <>
                            <Skeleton loading={groupingOfCourseLoading}>
                                <GroupingOfCourse data={value} />
                            </Skeleton>
                            <Skeleton loading={groupingOfTaskLoading}>
                                <GroupingOfTask data={value} />
                            </Skeleton>
                            <Skeleton loading={groupingOfAttendanceLoading}>
                                <GroupingOfAttendance data={value} />
                            </Skeleton>
                        </>
                    )}
                </Skeleton>
            </div>
        </div>
    );
});

SupervisorProfile.propTypes = {
    employeeCode: PropTypes.string,
    label: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
};
SupervisorProfile.defaultProps = {
    employeeCode: null,
    label: null
};
SupervisorProfile.displayName = 'SupervisorProfile';

export default SupervisorProfile;
